import {AppOutline, HandPayCircleOutline, UnorderedListOutline, UserOutline} from "antd-mobile-icons";
import {PlusCircleOutlined} from "@ant-design/icons";
import React from "react";
import { TabBar} from "antd-mobile";
import {useEmotionCss} from "@ant-design/use-emotion-css";
import {useNavigate} from "react-router-dom";

export const CustomTabs: React.FC = ()=> {
  const tabs = [
    {
      key: '/m/analyse',
      title: '图表',
      icon: <AppOutline />,
    },
    {
      key: '/m/moneyLogs',
      title: '流水',
      icon: <UnorderedListOutline />,
    },
    {
      key: '/m/addLogs',
      title: "记一笔",
      icon: <PlusCircleOutlined/>,
    },
    {
      key: '/m/lendOrOwe',
      title: '往来',
      icon: <HandPayCircleOutline />,
    },
    {
      key: '/m/myProfile',
      title: '我的',
      icon: <UserOutline />,
    },
  ]

  // css in js
  const tabBottomStyle = useEmotionCss(()=>{
    return {
      // flex: 0,
      position: 'fixed',
      bottom: 0,
      backgroundColor: 'white',
      color: 'black',
      width: '100%',
      borderTop: 'solid 2px #1677ff',
      zIndex: 1000,
      height: '66px',
      overflowX: 'hidden',
    }
  })

  // 当路由变化时，切换页面
  const navigate = useNavigate();

  return (
    <>
      <div style={{height: 90}}/>
      <TabBar
        className={tabBottomStyle}
        activeKey={location.pathname}
        onChange={(value)=> navigate(value)}
      >
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
    </>
  )
};
